<script setup async lang="ts">
import { computed, ref, watch, reactive, toRefs, type ComputedRef, type Ref, onBeforeMount } from 'vue';
// import {detectProvider} from 'web3modal'

// Components
import LayoutHeader from '@/layouts/components/layout-header.vue';
import LayoutFooter from '@/layouts/components/layout-footer.vue';

// Stores
import GlobalStore from '@/store/GlobalStore';
import ConfigStore from '@/store/ConfigStore';
import { storeToRefs } from 'pinia';
import storage from '@/utils/storage';
import { useRoute } from 'vue-router';
// import {onConnectListener} from "@/utils/wallet"

let route = useRoute()

/** Global Store */
const globalStore = GlobalStore();
/** Config Store */
const configStore = ConfigStore();

/** loading overlay visibility */
// const loading: Ref<boolean> = computed({
//   get: () => globalStore.loading,
//   set: v => globalStore.setLoading(v),
// });

const { _showMobileMenu } = storeToRefs(globalStore);

/** Snackbar visibility */
const snackbar: Ref<boolean> = ref(false);
/** Snackbar text */
const snackbarText: ComputedRef<string | null> = computed(
  () => globalStore.message
);
/** Toggle Dark mode */
const theme: ComputedRef<string> = computed(() =>
  configStore.themeDark ? 'dark' : 'light'
);

if (storage.getItem('lang') === undefined) {
  storage.setItem('lang', 'en');
}

// When snackbar text has been set, show snackbar.
watch(
  () => globalStore.message,
  value => {
    if (value) {
      snackbar.value = true;
    }
  }
);

let state = reactive({
  singlePage: false
})

let {singlePage} = toRefs(state)

let singlePagesPath = ['/course','/withdrawalFailed']

onBeforeMount(() => {
  if(singlePagesPath.includes(route.path)) {
    state.singlePage = true
  }else{
    state.singlePage = false
  }
})

</script>

<template>
  <!--  <Suspense>-->
  <!--    <template #default>-->
  <!--      <v-app :theme="theme">-->
  <!--        <layout-header></layout-header>-->

  <!--        <v-main>-->
  <!--          &lt;!&ndash;      <transition name="scroll-x-transition" mode="out-in" appear>&ndash;&gt;-->
  <!--          <router-view v-slot="{ Component }">-->
  <!--            <component :is="Component"/>-->
  <!--          </router-view>-->
  <!--          &lt;!&ndash;      </transition>&ndash;&gt;-->
  <!--        </v-main>-->

  <!--        <v-overlay v-model="loading" app>-->
  <!--          <v-progress-circular indeterminate size="64"/>-->
  <!--        </v-overlay>-->

  <!--        <v-snackbar-->
  <!--          v-model="snackbar"-->
  <!--          app-->
  <!--          timeout="5000"-->
  <!--          transition="scroll-y-transition"-->
  <!--        >-->
  <!--          {{ snackbarText }}-->
  <!--          <template #action="{ attrs }">-->
  <!--            <v-btn icon v-bind="attrs" @click="snackbar = false">-->
  <!--              <v-icon>mdi-close</v-icon>-->
  <!--            </v-btn>-->
  <!--          </template>-->
  <!--        </v-snackbar>-->

  <!--        <layout-footer></layout-footer>-->
  <!--      </v-app>-->
  <!--    </template>-->

  <!--    <template #fallback>-->
  <!--      &lt;!&ndash;        骨架屏&ndash;&gt;-->
  <!--&lt;!&ndash;      <div class="bg-green color-white h-screen w-full">加载中</div>&ndash;&gt;-->
  <!--&lt;!&ndash;      <skeleton></skeleton>&ndash;&gt;-->
  <!--    </template>-->
  <!--  </Suspense>-->

  <v-app
    :theme="theme"
    :class="_showMobileMenu ? 'overflow-hidden h-full' : ''"
    class="v-app"
  >
    <layout-header v-if="!singlePage"></layout-header>

    <v-main :class="['bg-white','pb-0', {'!pt-0': singlePage}]">
      <router-view v-slot="{ Component }">
        <!--        <transition name="route" mode="out-in">-->
        <!--        <transition name="scroll-x-transition" mode="out-in">-->
        <!--          <div :key="Component">-->
        <component :is="Component" />
        <!--          </div>-->
        <!--        </transition>-->
      </router-view>
    </v-main>

    <!--    <v-overlay v-model="loading" app>-->
    <!--      <v-progress-circular indeterminate size="32"/>-->
    <!--    </v-overlay>-->

    <v-snackbar
      v-model="snackbar"
      app
      timeout="5000"
      transition="scroll-y-transition"
    >
      {{ snackbarText }}
      <template #action="{ attrs }">
        <v-btn icon v-bind="attrs" @click="snackbar = false">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </template>
    </v-snackbar>

    <layout-footer v-if="!singlePage" :class="!_showMobileMenu ? '' : 'hidden'"></layout-footer>
  </v-app>
</template>

<style lang="scss">
@import 'node_modules/vuetify/lib/styles/settings';

html {
  // Fix always scrollbar shown.
  overflow-y: auto;
  // Modern scrollbar style
  scrollbar-width: thin;
  scrollbar-color: map-get($grey, 'lighten-2') map-get($grey, 'base');
}

html, body, #app {
  height: 100%;
}

.v-app {
  .v-application__wrap {
    min-height: 100%;
  }
}

::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.1);
  background-color: map-get($grey, 'lighten-2');
}

::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  background-color: map-get($grey, 'base');
  box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.1);
}

// Fixed a bug that the theme color is interrupted when scrolling
.v-application {
  overflow-y: auto;
}

@media screen and (min-width: 601px) {
  .v-main {
    padding-top: 120px !important;
  }
}

@media screen and (max-width: 600px) {
  .v-main {
    padding-top: 60px !important;
  }
}

#app {
  font-family: DINPro;
  padding: 0;
  background: white;
}

/*
// Color scheme of scroll bar according to the theme
.theme-- {
  &light {
    scrollbar-color: map-get($grey, 'lighten-2') map-get($grey, 'base');
    ::-webkit-scrollbar-track {
      background-color: map-get($grey, 'lighten-2');
    }
  }
  &dark {
    scrollbar-color: map-get($grey, 'darken-2') map-get($grey, 'base');

    ::-webkit-scrollbar-track {
      background-color: map-get($grey, 'darken-2');
    }
  }
}
*/

// route animation
.route-enter-from {
  opacity: 0;
  //transform: translateX(100px);
}

.route-enter-active {
  //transition: all 0.3s ease-out;
  transition: opacity 0.5s ease;
}

.route-leave-from {
  display: none;
}

.route-leave-to {
  opacity: 0;
  //transform: translateX(-100px);
}

//
//.route-leave-active {
//  transition: all 0.3s ease-in;
//}
</style>
